import './assets/main.css'

import {createApp, inject} from 'vue'
import App from './App.vue'
import {router} from './router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import Card from "./components/Card.vue";
import {NButton, NInput} from 'naive-ui';
import {createPinia} from "pinia";

import zhCn from 'element-plus/es/locale/lang/zh-cn'
import ElementPlus from "element-plus";
import 'element-plus/dist/index.css'
//代码高亮
import {highlight} from "@/common/high_light.ts";
// 自定义插件
import i18n from './plugins/i18n';//插件定义
import CN from './plugins/cn.ts';
import {useUserStore} from "@/common/setup_store.ts";
//语言文件

const app = createApp(App)
//element ui库
app.use(ElementPlus, {size: 'small', zIndex: 3000, locale: zhCn})
//状态管理
app.use(createPinia())
//路由
app.use(router)
//注册全局组件
// app.component('Hello', Hello)
app.component('n-button', NButton);
app.component('n-input', NInput);
app.component('card', Card)
//插件
app.use(i18n, CN)
//注册全局自定义指令
app.directive('border', {//自定义指令不需要前缀v-，注册border指令，调用 v-border
    mounted: (el) => {
        console.log(el);
        el.classList.add("border", "shadow", "rounded-3", "p-3");
    }
})

app.directive('color', {//自定义指令不需要前缀v-
    mounted(el, binding, vnode) {
        console.log(el);
        console.log('app binding', binding);
        el.classList.add(binding.value);
    },
})
//代码高亮
// 注册一个全局指令
app.directive('highlight', {
    mounted(el): void {
        highlight(el)
    }
});

app.provide("uid", 100);

//前置路由守卫---中间件
router.beforeEach((to, from, next) => {
    console.log('before_from', from);
    console.log('before_to', to);
    const uid = inject('uid');
    console.log('uid', uid);
    const store = useUserStore();
    console.log('store count', store.count);
    next();
})

router.afterEach((to, from, next) => {
    console.log('after_to', to);
    console.log('after_from', from);
})





app.use(router)


app.mount('#app')
